<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>逆转文本</title>
</head>

<body>
	<div id="app">
		<h1>
			{{ text }}
		</h1>
		<button @click="reverseText2()">逆转文本</button>
	</div>
	<script src="../vue.js"></script>
	<script>
		let app = new Vue({
			el: '#app',
			data: {
				text: 'Hello World!'
			},
			methods: {
				reverseText1() {
					if (this.text === 'Hello World!') {
						this.text = 'dlroW olleH'
					} else {
						this.text = 'Hello World!'
					}
				},
				reverseText2() {
					this.text = this.text.split('').reverse().join('')
				},
			}
		})
	</script>
</body>

</html>